<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <!--    <meta content="telephone=no" name="format-detection">-->
    <meta name="google" value="notranslate">
    <meta name="root-url" value="">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta property="title" content="">
    <meta property="key" content="">
    <meta property="description" content="">
    <title>投诉与建议</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/app-base.css">
    <link rel="stylesheet" href="css/app-main.css">

    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/example.css">
    <!-- <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/zepto.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script> -->

    <script src="js/vue.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <script  src="js/_config.json"></script>


    <style>
    .pro_type_grid .pro_item{
        width: calc(50% - .21rem * 2);
    }
    .header-search-txt{
        padding-left: 24px;
padding-right: 10px;
        width: 100%;
        background: #dddcdc;
       /* margin-left: 10px;
        margin-right: 10px;*/
        height: 25px;
        border-radius: 50px;
    }
    .page-header-background.header-title{
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        line-height: 44px;
    }
    .pro_item .cover .photo{
        height:30px !important
    }
    .pro_item .cover{
        text-align: center;
    }
    .pro_item .item_inner{
        display: grid;
        grid-template-rows: auto auto;
        margin-bottom: 5px;
        background: #fff;
        padding-top: 15px;
        padding-bottom: 15px;
        height: 55px;
    }
    .pro_item div{
        text-align: center;
        font-size: 13px;
    }
    body{
        background: #eee;
        height: 100%;
    }
    .pro_item{
        display: grid;
grid-template-columns: auto auto;
grid-column-gap: 5px;
    }
    .page-header-background.header-title{
        background: #40af41;
    }
    .p1{
        padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
background: #fff;
padding-top: 6px;
margin-top: -6px;
    }
    .p2{
        margin-left: 10px;
margin-right: 10px;
font-size: 10px;
text-align: center;
margin-bottom: 10px;

    }
    .c1{
        color: #888;
    }
    .d3{
        margin-bottom: 10px;
margin-top: 10px;
    }
    .d4{
        text-align: center;
/*        margin-bottom: 30px;*/
 margin-left: 10px;
margin-right: 10px;
padding-top: 10px;
    }
    .but-lx{
    border: none;
width: 100%;
background: #40af41;
color: #fff;
line-height: 25px;
  border-radius: 50px;
  font-size: 12px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #40af41 !important;
}
.swiper-pagination-bullet{
    width: 5px !important;
height: 5px !important;
border-radius: 50px !important;
background: #888 !important;
}
.pp1{
    text-align: center;
color: #fff;
background: #40af41;
line-height: 44px;
font-size: 14px;
}
.pp2 img{
 width: 30px;
 height: 30px;
 margin-top: 10px;
}
.pp2{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: #cecbcb;
    text-align: center;
}
.pp3{
    display: grid;
grid-template-columns: auto 50px auto;
padding-top: 30px;
padding-bottom: 34px;
background: #fff;
}
.text{
    padding-top: 15px;
}
body{
    background: #cecece;
}
.ppi5 img{
    height: 20px;
    width: auto;
margin-top: 10px;
}
.ppi5 a{
    display: grid;
grid-template-columns: auto 15px;
line-height: 40px;
background: #fff;
margin-right: 10px;
margin-left: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #cecece;
}
.ppi5{
margin-top: 10px;
background: #fff;
margin-bottom: 10px;
}
.active .fb-user {
  background-position: -3.6rem 0 !important;
}
.fb.fb-user{
    background-image: url(../images/user1.png) !important;
    background-position: 0 0 !important;
}
.fb.fb-home{
    background-image: url(../images/home1.png) !important;
    background-position: 0 0 !important;
}
.nav-controller{
    color:#40af41 !important
}
.nav-controller.active{
    color:#888 !important
}
.d5{
    margin:20px;
    padding: 20px;
    background: #fff;
border-radius: 3px;
}
.fstitle{
font-size: 12px;
text-align: center;
color: #205521;
}
.ps01{
    background: #fff;
    display: grid;
grid-template-columns: 60px auto;
/*width: 100%;*/
text-align: left;
line-height: 44px;
padding-left: 10px;
padding-right: 10px;
}
.ps01 input{
    text-align: right;
    width: 100%;
}
textarea{
    border: none;
    width: 100%;
    padding: 0px;
    padding-left: 0px !important;
padding-right: 0px !important;
}
textarea{
    
    font-size: 12px;

}
input{
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 12px;
}
.folc{
    font-size: 12px;
}
.cc{
    border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #cecece;
}
.cc1{
    margin-bottom: 10px;   
}
.ps4{
    padding-top: 10px;
    padding-bottom: 10px;
}

::placeholder {

    color: hsl(0, 0%, 0%) !important;
}

</style>

<style>
        .weui-form{
            background: #cecece;
        }
        .weui-cells{
            background: #fff;
            color: #000;
        }
        .weui-cells div{
/*            color: #000;*/
            font-size: 12px;
            margin-left: 0px !important;
margin-right: 0px !important;

        }
        .weui-cell_select .weui-cell__bd::after{
            color: hsla(0, 0%, 0%, 0.52) !important;
        }
        .weui-cell.weui-cell_active.weui-cell_select{
            height: 44px;
        }
        .weui-form__control-area{
            margin-top: 0px;
        }
        .weui-form{
            padding-top: 0px;
        }
    </style>

    <style>
    .pro_type_grid .pro_item{
        width: calc(50% - .21rem * 2);
    }
    .header-search-txt{
        padding-left: 24px;
padding-right: 10px;
        width: 100%;
        background: #dddcdc;
       /* margin-left: 10px;
        margin-right: 10px;*/
        height: 25px;
        border-radius: 50px;
    }
    .page-header-background.header-title{
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        line-height: 44px;
    }
    .pro_item .cover .photo{
        height:30px !important
    }
    .pro_item .cover{
        text-align: center;
    }
    .pro_item .item_inner{
        display: grid;
        grid-template-rows: auto auto;
        margin-bottom: 5px;
        background: #fff;
        padding-top: 15px;
        padding-bottom: 15px;
        height: 55px;
    }
    .pro_item div{
        text-align: center;
        font-size: 13px;
    }
    body{
        background: #eee;
        height: 100%;
    }
    .pro_item{
        display: grid;
grid-template-columns: auto auto;
grid-column-gap: 5px;
    }
    .page-header-background.header-title{
        background: #40af41;
    }
    .p1{
        padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
background: #fff;
padding-top: 6px;
margin-top: -6px;
    }
    .p2{
        margin-left: 10px;
margin-right: 10px;
font-size: 10px;
text-align: center;
margin-bottom: 10px;

    }
    .c1{
        color: #888;
    }
    .d3{
        margin-bottom: 10px;
margin-top: 10px;
    }
    .d4{
        text-align: center;
/*        margin-bottom: 30px;*/
/*        position: fixed;*/
bottom: 10px;
/*width: 100%;*/
    }
    .but-lx{
    border: none;
width: 70%;
background: #f08818;
color: #fff;
line-height: 30px;
  border-radius: 50px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #40af41 !important;
}
.swiper-pagination-bullet{
    width: 5px !important;
height: 5px !important;
border-radius: 50px !important;
background: #888 !important;
}
.fb.fb-user{
    background-image: url(../images/user2.png) !important;
    background-position: 0 0 !important;
}
.fb.fb-home{
    background-image: url(../images/home2.png) !important;
    background-position: 0 0 !important;
}
.nav-controller{
    color:#888 !important
}
.nav-controller.active{
    color:#40af41 !important
}
.weui-cell-bor {
    border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #cecece;
}
.b-d1{
    padding-left: 10px;
    padding-right: 10px;
    grid-column-gap: 10px;
    display: grid;
grid-template-columns: 5px auto;
}
.b-d1-1{
    background: #40af41;
}
.b-r-1{
    display: grid;
grid-template-rows: 14px auto 14px;
height: 44px;
    line-height: 16px;
}
.page.home .weui-cell {
/*  padding-left: 10px !important;
  padding-right: 10px !important;*/
}
.weui-select {
    padding-left: 0px !important;
    
/*    padding-right: 0px !important;*/
}
.weui-select.p{
    text-align: right;
}
.weui-cell__hd,.weui-cell__hd{
padding-left: 0px !important;
}
.weui-input::placeholder{
color:#000 !important;
text-align: right;
}
.b-r-20{
    padding-right: 30px;
}
.weui-input {
    text-align: right;
}
.weui-cell__bd .weui-select{
    text-align: right;
}
.weui-cell-bor{
    background: #fff;
}

.hei1{
    height: 10px;
    background: #cecece;
    width: 100%;
}
.hei2{
    height: 44px;
    line-height: 44px;
    width: 100%;
    text-align: center;
}
.hei2-1{
    height: 44px;
    line-height: 44px;
    width: 100%;
}
.weui-switch-cp__input:checked + .weui-switch-cp__box, .weui-switch-cp__input[aria-checked="true"] + .weui-switch-cp__box, .weui-switch:checked{
    height: 20px;
}
.weui-cell_select-before .weui-cell__hd::before{
    display: none !important;
}

.weui-cell__ft input{
    display: none !important;

}
.weui-icon-checked.active{
    background: #fff !important;
    border-color: #40af41;
}
.weui-icon-checked{
    
    border-radius: 50px ;
    border-left-width: 7px;
border-left-style: solid;
border-top-width: 7px;
border-top-style: solid;
border-right-style: solid;
border-bottom-width: 7px;
border-bottom-style: solid;

border-right-width: 7px;
width: 12px !important;
height: 12px !important;
margin-bottom: 10px;
border-color: #eee;
}
.weui-cell__ft{
    text-align: center;
}

.weui-cell__ft .active{
    color: #40af41;
}
.weui-cell__ft div{
    color: #000;
}



.weui-switch, .weui-switch-cp__box{
    background-color: hsl(0, 0%, 80.8%) ;
}
.weui-cell.weui-cell_active.weui-cell_switch{
    padding-top: 8px;
padding-bottom: 6px;
}
.weui-switch, .weui-switch-cp__box{
    height: 27px !important;
    width: 47px !important;
}
.weui-switch-cp__box::after, .weui-switch::after{
    width: 23px !important;
height: 23px !important;
}
.hei2-1 .none{
    display: none;
}

.d4 div{
    background: #40af41;
    color: #fff !important;
    border-radius: 50px;
}
.d4{
    padding-left: 10px;
padding-right: 10px;
background: #cecece;
}

.page.home .weui-cell {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.weui-cell__hd,.weui-select{
    color: #000 !important;
}

</style>


</head>
<body ontouchstart>


<script type="text/javascript">window.__wxWebEnv&&(document.body.style.webkitTextSizeAdjust=JSON.parse(window.__wxWebEnv.getEnv()).fontScale+"%")</script>
    <span aria-hidden="true" id="js_a11y_comma" class="weui-hidden_abs">，</span>
    <div role="alert" class="weui-toptips weui-toptips_warn js_tooltips">错误提示</div>
    <div class="container" id="container"></div>
    <script type="text/html" id="tpl_home">
    <div class="page">


        <div class="page-header-background header-title">
            <a href="javascript:;" onclick="window.location.href=history.back(-1)"><div style="position: absolute;padding-top: 5px;padding-left: 5px;"><img style="height: 20px;" src="images/return.png"></div></a>
            <div>投诉与建议</div>
        </div>
                          

        <div class="weui-form">
            <div class="weui-form__bd">
                <div class="weui-form__control-area">
                    <div class="weui-cells__group weui-cells__group_form">
                        <div class="weui-cells" id="vue-main">
                            

                            <div class="ps01 cc">
                                <div>订单号</div><input id="orderid" v-model="" type="text" placeholder="请输入订单号" name="">
                            </div>
                            <div class="ps01 cc">
                                <div>联系电话</div><input id="phone" v-model="" type="text" placeholder="请输入联系电话" name="">
                            </div>
                            <div id="showPicker1" role="button" aria-haspopup="listbox" class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after weui-cell-bor">
                                <div class="weui-cell__hd"><label class="weui-cell__hd">投诉对象</label></div>
                                <div class="weui-cell__bd"><div id="tsobj" class="weui-select p">客服</div></div>
                            </div> 
                            
                            <div class="ps4 cc" style="padding-left: 10px;padding-right: 10px;background: #fff;">
                                <textarea id="tscontent" v-model="" style="margin-top: 0px;padding-left: 0px;padding-right: 0px;" rows="5" placeholder="投诉内容"></textarea>
                            </div>
       
                            <div class="ps4" style="padding-left: 10px;
                        padding-right: 10px;
                        background: #fff;">
                                <textarea id="tsfanan" v-model="" style="margin-top: 0px;padding-left: 0px;padding-right: 0px;" rows="5" placeholder="希望解决方案"></textarea>
                            </div>
             
                            <a role="button" id="showToast" href="javascript:;" class="but-lx">
                                <div class="d4">
                                    <div >提交</div>
                                </div>
                            </a>

                            <div role="alert" id="toast" style="display: none;">
                                <div class="weui-mask_transparent"></div>
                                <div class="weui-toast__wrp">
                                  <div class="weui-toast">
                                      <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                                      <p class="weui-toast__content">成功</p>
                                  </div>
                                </div>
                            </div>
                            <div role="alert" id="warnToast" style="display: none;">
                                <div class="weui-mask_transparent"></div>
                                <div class="weui-toast__wrp">
                                    <div class="weui-toast">
                                        <i class="weui-icon-warn weui-icon_toast"></i>
                                        <p class="weui-toast__content">必填项不能为空</p>
                                    </div>
                                </div>
                            </div>

                            <div role="alert" id="warnToast3" style="display: none;">
                                <div class="weui-mask_transparent"></div>
                                <div class="weui-toast__wrp">
                                    <div class="weui-toast">
                                        <i class="weui-icon-warn weui-icon_toast"></i>
                                        <p class="weui-toast__content">请先登录</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        $(function(){
            var $toast = $('#toast');
            var $warnToast =$("#warnToast");
            var $warnToast3 =$("#warnToast3");

            

            $('#showToast').on('click', function(){
                if ($toast.css('display') != 'none') return;

                var token=localStorage.getItem("__token__");
                if (!token) {
                    $warnToast3.fadeIn(100);
                    setTimeout(function () {
                        $warnToast3.fadeOut(100);
                    }, 1000);
                    window.location.href="sign.html";
                    return;
                }


                var orderid             =document.getElementById("orderid").value;
                var phone               =document.getElementById("phone").value;
                var tsobj               =document.getElementById("tsobj").innerText;
                var tscontent           =document.getElementById("tscontent").value;
                var tsfanan             =document.getElementById("tsfanan").value;
                
                if (orderid=="") {
                    $warnToast.fadeIn(100);
                    setTimeout(function () {
                        $warnToast.fadeOut(100);
                    }, 1000);
                    return;
                }

                if (phone=="") {
                    $warnToast.fadeIn(100);
                    setTimeout(function () {
                        $warnToast.fadeOut(100);
                    }, 1000);
                    return;
                }

                if (tsobj=="") {
                    $warnToast.fadeIn(100);
                    setTimeout(function () {
                        $warnToast.fadeOut(100);
                    }, 1000);
                    return;
                }

                if (tscontent=="") {
                    $warnToast.fadeIn(100);
                    setTimeout(function () {
                        $warnToast.fadeOut(100);
                    }, 1000);
                    return;
                }

                if (tsfanan=="") {
                    $warnToast.fadeIn(100);
                    setTimeout(function () {
                        $warnToast.fadeOut(100);
                    }, 1000);
                    return;
                }

                let url=siteConfig.BaseUrl+"/h5/api/?url=ts";
                $.post(url,{
                    uid:        localStorage.getItem("__token__"),
                    orderid:    orderid,
                    phone:      phone,
                    tsobj:      tsobj,
                    tscontent:  tscontent,
                    tsfanan:    tsfanan
                },function(res){

                })
                $toast.fadeIn(100);
                setTimeout(function () {
                    $toast.fadeOut(100);
                    window.location.href="user.html";
                }, 500);
            });
        });


        $('#showPicker1').on('click', function () {
            weui.picker([{
                label: '客服',
                value: 0
            }, {
                label: '驾驶员',
                value: 1
            }, {
                label: '其他',
                value: 2
            }], {
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    $("#showPicker1 .weui-select").text(result[0].label);
                    console.log(result);
                }
            });
        });
    </script>




<!-- <script src="https://weui.io/zepto.min.js"></script>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.17/weui.min.js"></script>
        <script src="https://weui.io/example.js"></script>
        <script src="https://weui.io/wah.js"></script>
 -->

        <script src="js/zepto.min.js"></script>
        <script type="text/javascript" src="js/jweixin-1.0.0.js"></script>
        <script src="js/weui.min.js"></script>
        <script src="js/example.js"></script>
        <script src="js/wah.js"></script>
      


        <script type="text/javascript"></script>
        <script type="text/javascript">function wxReady(e){"object"==typeof WeixinJSBridge&&"function"==typeof window.WeixinJSBridge.invoke?e():document.addEventListener("WeixinJSBridgeReady",e,!1)}wxReady(function(){WeixinJSBridge.invoke("getUserConfig",{},function(e){e.isCareMode&&document.body.setAttribute("data-weui-mode","care")})})</script>


</body>
</html>


